<template>
    <ul class="contextMenu" 
        :style="`top:${top}px; left:${left}px;`" 
        v-if="visible && page" 
        @contextmenu.prevent
        @mouseleave="visible=false">
        <li :class="`${cmdActive['cut']?'':'disabled'}`"><a @click.stop="command('cut')">剪切 <span class="shortcut">Ctrl+X</span></a></li>
        <li :class="`${cmdActive['copy']?'':'disabled'}`"><a @click.stop="command('copy')">复制<span class="shortcut">Ctrl+C</span></a></li>
        <li :class="`${cmdActive['paste']?'':'disabled'}`"><a @click.stop="command('paste')">粘贴<span class="shortcut">Ctrl+V</span></a></li>
        <li :class="`separator ${cmdActive['del']?'':'disabled'}`"><a @click.stop="command('del')">删除<span class="shortcut">⌫</span></a></li>
        <li :class="`separator ${cmdActive['undo']?'':'disabled'}`"><a @click.stop="command('undo')">撤销<span class="shortcut">Ctrl+Z</span></a></li>  
        <li :class="`${cmdActive['redo']?'':'disabled'}`"><a @click.stop="command('redo')">重做<span class="shortcut">Ctrl+Y</span></a></li>          
        <li :class="`separator ${cmdActive['movefront']?'':'disabled'}`"><a @click.stop="command('movefront')">置最前<span class="shortcut">Ctrl+⇧↑</span></a></li>
        <li :class="`${cmdActive['moveup']?'':'disabled'}`"><a @click.stop="command('moveup')">置前<span class="shortcut">Ctrl+↑</span></a></li>
        <li :class="`${cmdActive['movedown']?'':'disabled'}`"><a @click.stop="command('movedown')">置后<span class="shortcut">Ctrl+↓</span></a></li>
        <li :class="`${cmdActive['moveback']?'':'disabled'}`"><a @click.stop="command('moveback')">置最后<span class="shortcut">Ctrl+⇧↓</span></a></li>
        <li :class="`separator ${cmdActive['lock']?'':'disabled'}`"><a @click.stop="command('lock')">锁定<span class="shortcut">Ctrl+L</span></a></li>
        <li :class="`${cmdActive['unlock']?'':'disabled'}`"><a @click.stop="command('unlock')">解除锁定<span class="shortcut">Ctrl+⇧L</span></a></li>
    </ul>
</template>
<script>
import helper from '../helper'
export default {
    name: "contextMenu",
    data(){
        return {   
            visible:false,
            top:0,
            left:0,
            svgXY:{x:0,y:0}         
        }
    },
    props:{
       page:null,
       cmdActive:{}
    },
    computed: {
        
    },
    methods:{
        show:function(event){
            this.svgXY = helper.svgClickXY(this.page,event);            
            var container = document.querySelector("body");
            var size=this.page.size;           
            this.left = event.pageX-2;            
            if(event.pageY+255 > container.clientHeight){
                this.top = container.clientHeight-255;
            }else{
                this.top=event.pageY;
            }

            this.visible=true;
        },
        command:function(v,args){
            this.visible=false;
            this.$emit('command',v,args);           
        },
        enabled:function(cmd){
            return false;
            //return this.cmdActive[cmd]?"":"disabled";
        }
    }

}
</script>
<style lang="scss" scoped>
.contextMenu {
  position: absolute;
  z-index: 99999;
  border: solid 1px rgba(0,0,0,.33);
  background: rgba(255,255,255,.95);
  padding: 5px 0;
  margin: 0px;
  display: none;
  font: 12px/15px 'Lucida Sans', 'Lucida Grande', Helvetica, Verdana, sans-serif;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
  -webkit-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
  box-shadow: 2px 5px 10px rgba(0,0,0,.3);
  width: 150px;
  display: block;
}

.contextMenu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.contextMenu .shortcut {
  width: 45px;           
  text-align:right;
  float:right;
}

.contextMenu a {
  -moz-user-select: none;
  -webkit-user-select: none;
  color: #222;
  text-decoration: none;
  display: block;
  line-height: 20px;
  height: 20px;
  background-position: 6px center;
  background-repeat: no-repeat;
  outline: none;
  padding: 0px 15px 1px 20px;
}

.contextMenu li:hover a {
  background-color: #2e5dea;
  color: white;
  cursor: default;
}


.contextMenu li.disabled a {
  background-color: #ffffff;
  color: #999;
}

.contextMenu li:hover.disabled a {
  background-color: transparent;
}

.contextMenu li.separator {
  border-top: solid 1px #E3E3E3;
  padding-top: 5px;
  margin-top: 5px;
}

</style>